<template>
  <view class="customNavBar" >
    <view class="navbar">
      <!-- 状态栏 标题栏 合一页面头部-->
      <!-- 状态栏 时间 电量 胶囊-->
      <view class="statusBar" :style="{height:getStatusBarHeight() + 'px'}"> </view>
      <!-- 标题栏 -->
      <view class="titleBar" :style="{height:getTitleBarHeight() + 'px'}">
        <i class="iconfont icon-zuojiantou" @tap="navBack"></i>
        <view class="title">{{props.title}}</view>
        <slot></slot>
      </view>
    </view>
    <!-- 填充区域 -->
    <view class="fill" :style="{height:getNavBarHeight()+ 'px'}">

    </view>
  </view>
</template>

<script setup>
import {
  ref,
  defineProps,
  defineEmits,
} from 'vue';
import {
  onShow
} from "@dcloudio/uni-app";
// 引入自定义头部导航栏相关信息
import {
  getStatusBarHeight,
  getTitleBarHeight,
  getNavBarHeight
} from "@/utils/system.js"

const emit = defineEmits('rightIcon')

const props = defineProps({
  title: {
    type: String,
    require: true
  },

})
const navBack = () => {
  uni.navigateBack()
}

const rightIcon = ()=>{
  emit('rightIcon')
}
</script>

<style lang="scss" scoped>
@import '../../static/style/variables.scss';
@import '../../static/style/common.scss';

.customNavBar {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: $z-index;
    background: $box-bg-color-white;
    box-sizing: border-box;


    .titleBar {
      padding: 0 $edition-pg;
      @include flex($align: center, $justify: space-between);

      .title {
        @include titleStyleBase;
      }
    }
  }
}
</style>